<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2023-01-30 17:15:43
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-01-30 17:54:28
-->
<!--
 1.随机数 
	1~6  Math.floor(Math.random()*6+1);
 2.定时器 
	setInterval(函数,毫秒) 间歇定时器 每隔多长时间执行多少次
	返回值是 数字 表示第几个定时器
	setTimeout(函数,毫秒) 超时定时器  多长时间以后执行1次
	返回值是 数字 表示第几个定时器

	clearInterval(第几个定时器);
	clearTimeout(第几个定时器);
 3.获取元素 
	id class 标签 name 选择器
 4.操作元素的属性
	原生属性  id class type 
	自定义属性  setAttribute
				removeAttribute
				getAttribute
	H5 
		dataset 

-->
<html>
	<head>
	</head>
	<body>
		<img src="sai6.png" width=100 height=100 onclick="zhuan()"/>
		<img src="sai1.png" width=100 height=100 onclick="zhuan()"/>
		<img src="sai1.png" width=100 height=100 onclick="zhuan()"/>
		<button onclick="zhuan()">开始</button>
		<button onclick="tostop()">结束</button>
	</body>
	<script>
		var num;
		var btn1 = document.querySelectorAll('button')[0];
		var btn2 = document.querySelectorAll('button')[1];

		function zhuan(){
			// 每隔多少秒执行一次 操作 将img的src 属性替换 
			// 定时器 
			num = setInterval("mychange()",50)
			// 给开始按钮移出onclick属性 
			btn1.removeAttribute('onclick');
			// 给结束按钮加上onclick
			btn2.setAttribute("onclick","tostop()");
		}

		function mychange(){
			// 生成随机数 
			var num1 = Math.floor(Math.random()*6+1);
			var num2 = Math.floor(Math.random()*6+1);
			var num3 = Math.floor(Math.random()*6+1);

			// 获取元素 拿到src属性 赋值 
			document.querySelectorAll('img')[0].src = 'sai'+num1+'.png';
			document.querySelectorAll('img')[1].src = 'sai'+num2+'.png';
			document.querySelectorAll('img')[2].src = 'sai'+num3+'.png';
			
		}
		

		function tostop(){
			clearInterval(num);
			// 移出结束按钮onclick
			// 给开始按钮添加onclick
			btn2.removeAttribute('onclick');
			btn1.setAttribute("onclick","zhuan()");
		}
	</script>
</html>